<!--
 * @Author: zyp yangpeng.zhang@fts.aero
 * @Date: 2024-05-29 15:31:11
 * @LastEditors: zyp yangpeng.zhang@fts.aero
 * @LastEditTime: 2024-06-28 11:08:26
 * @FilePath: \vue3-dynamic-module\src\modules\Game\index.vue
 * @Description: 程式描述
-->
<script setup lang="ts">
import global from '@/store/global';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';

const modules = [Autoplay];

const piniaGlobal = global();
const currentIndex = ref();
const getIndex = () => {
  currentIndex.value = piniaGlobal.getIndex;
  console.log('111', piniaGlobal.getIndex);
}
const data: any = reactive({
  goods: [
    {
      src: new URL('@/assets/images/home/1.jpg', import.meta.url).href,
    },
    {
      src: new URL('@/assets/images/home/2.jpg', import.meta.url).href,
    },
    {
      src: new URL('@/assets/images/home/3.jpg', import.meta.url).href,
    },
    {
      src: new URL('@/assets/images/home/4.jpg', import.meta.url).href,
    },
  ],
});
const {
  goods,
} = toRefs(data);
</script>

<template>
  <div class="game">
    <div class="game-banner">
      <swiper :slidesPerView="'auto'" :auto-height="true" :space-between="12" :autoplay="{
        delay: 5000,
        disableOnInteraction: false
      }" :modules="modules" class="super-swiper">
        <swiper-slide v-for="item in goods" :key="item._id" class="super-swiper-slide">
          <img :src="item.src" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<style scoped lang="scss">
.game{
  .game-banner {
    position: relative;
    overflow: hidden;
    .super-swiper {
      width: 100%;
      .super-swiper-slide {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
